<template>
	<view>
		<up-modal :show="show" title="获取您的手机号码注册"
		  @confirm="onConfirm"
		   :showCancelButton="false">
			<view class="slot-content" style="width: 100%;">
				<up-form
						labelPosition="left"
						:model="model1" 
						ref="form1"
				>
					<up-form-item
							label=""
							prop="mobile" 
							ref="item1"
					>
						<up-input
						prefixIcon="phone"
						 prefixIconStyle="font-size: 16px; "
							v-model="model1.mobile"
							 border="surround"
							 placeholder="请输入或者自动获取"
							:custom-style="{borderColor:''}"
						></up-input>
						<template #right>
							<view style="padding-left: 10px;">
								<up-button text="点击获取"
								open-type='getPhoneNumber' 
								@getphonenumber="onGetphonenumber"  
								class="u-button u-reset-button u-button--default u-button--square"
								 ></up-button>
							 </view>
						</template>
					</up-form-item>
			</up-form>
			</view>
		</up-modal>
	</view>
</template>

<script>
	export default {
		name:"kb-bind-mobile",
		
		props:{
			//外部设置组件属性就能显示弹窗
			showModal: {
				type: Boolean,
				default: false,
			}
		},
		 
		data() {
			return {
				show: undefined, 
				model1 :{
					mobile:""
				}
			};
		}, 
		watch:{
			//外部属性也能改变show状态
			showModal(n,o){
				console.log(n,o)
				 this.show = !this.show;
			}
		},
		methods:{
			 onGetphonenumber(e){
				 console.log(e)
				 if(e.detail.errMsg=='getPhoneNumber:ok'){
					this.kbutil.getModuleData("webfront/getphone", {
						encrypdata:  e.detail.encryptedData,
						ivdata:  e.detail.iv,
						code : e.detail.code,
					}) .then( ret => {
						if(ret.code) {
							uni.showModal({
								content: "请输入手机号"
							})
						}else{
							this.model1.mobile = ret.data.phoneNumber
						}
					})
				 }
				 
			 },
			 onConfirm(e){
				 //
				// console.log(this.model1)
				 this.kbutil.getModuleData("webfront/bindMobile", this.model1).then(ret =>{
				 	//更改绑定状态 
				    this.ee.isBindMobile = true;
				    this.ee.showBindMobile = !this.ee.showBindMobile
					this.$refs.form1.resetFields()
				 }).catch( e=>{
					 //关闭modal弹窗
					 
						this.show = false;
					 
					 
				 })
				 
			 }
		},
		mounted() {
			 
		}
		
	}
</script>

<style>
 
</style>